<template>
    <div class="searchBar" id="overhaul_searchBar">
        <div class="navBar">
            <ul>
                <li :class="activeIndex == 0 ? 'active' : ''" @click="changeNav(0)">
                    <span>全部</span>
                </li>
                <li class="userType" :class="activeIndex == 1 ? 'active' : ''" @click="changeNav(1)">
                    <span>待我处理</span>
                </li>
                <li :class="activeIndex == 2 ? 'active' : ''" @click="changeNav(2)">
                    <span>我已处理</span>
                </li>
                <li :class="activeIndex == 3 ? 'active' : ''" @click="changeNav(3)">
                    <span>由我新建</span>
                </li>
            </ul>
        </div>
        <div class="content">
            <div class="searchBar_content" :class="packUp_overhaul ? 'alarmRule_form_packUp' : ''">
                <div class="left">
                    <el-form class="form" :model="searchData.params" label-position="left">
                        <el-form-item label="工单编号">
                            <el-input v-model="searchData.params.name" placeholder="工单编号"></el-input>
                        </el-form-item>
                        <el-form-item label="工单状态">
                            <el-select v-model="searchData.params.stockState" class="m-2" placeholder="工单状态" clearable>
                                <el-option label="不在库" :value="1" />
                                <el-option label="在库" :value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="工单类型">
                            <el-select v-model="searchData.params.stockState" class="m-2" placeholder="工单类型" clearable>
                                <el-option label="不在库" :value="1" />
                                <el-option label="在库" :value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否收费">
                            <el-select v-model="searchData.params.stockState" class="m-2" placeholder="是否收费" clearable>
                                <el-option label="不在库" :value="1" />
                                <el-option label="在库" :value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="创建日期">
                            <el-select v-model="searchData.params.useType" class="m-2" placeholder="创建日期" clearable>
                                <el-option label="个人" :value="1" />
                                <el-option label="公用" :value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="所属系统">
                            <el-select v-model="searchData.params.stockState" class="m-2" placeholder="所属系统" clearable>
                                <el-option label="不在库" :value="1" />
                                <el-option label="在库" :value="2" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="所属专业">
                            <el-select v-model="searchData.params.stockState" class="m-2" placeholder="所属专业" clearable>
                                <el-option label="不在库" :value="1" />
                                <el-option label="在库" :value="2" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <template v-if="packUp_overhaul">
                    <div class="right">
                        <div class="btn_bg" title="搜索" @click="searchList">
                            <img class="btn_icon search_icon" src="../../../../assets/images/images_new/search_icon.png"
                                alt="">
                        </div>
                        <div class="btn_bg btn_bg2" title="清空" @click="empty">
                            <img class="btn_icon reset_icon" src="../../../../assets/images/images_new/reset_icon.png"
                                alt="">
                        </div>
                        <div class="more" @click="changePackUp">
                            <span>更多筛选</span>
                            <img class="packUp_icon" src="../../../../assets/images/images_new/packUp_icon.png" alt="">
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div class="right right2">
                        <div class="right_btn">
                            <div class="btn_bg" title="搜索" @click="searchList">
                                <img class="btn_icon search_icon"
                                    src="../../../../assets/images/images_new/search_icon.png" alt="">
                            </div>
                            <div class="btn_bg btn_bg2" title="清空" @click="empty">
                                <img class="btn_icon reset_icon"
                                    src="../../../../assets/images/images_new/reset_icon.png" alt="">
                            </div>
                        </div>
                        <div class="more" @click="changePackUp">
                            <span>更多筛选</span>
                            <img class="packUp_icon" src="../../../../assets/images/images_new/packUp_icon.png" alt="">
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useMain, store } from "@/store/index";
import { storeToRefs } from 'pinia';


let activeIndex = ref(0);

//切换tab栏
const changeNav = (val: number) => {
    if (activeIndex.value != val) {
        activeIndex.value = val;
    }

}

let searchData = reactive({
    params: {
        assetTypeId: '', //资产分类id
        brand: '', //所属品牌
        buildingId: '', //建筑物区域id
        floorId: '', //楼层id
        model: '', //资产型号
        name: '', //资产名称
        num: '', //资产编号
        roomId: '', //房间id
        stationId: '', //工位id
        stockState: '', //在库标识：1-不在库，2-在库
        useType: '', //用途：1-个人，2-公司
    } as any
})

const props = defineProps({
    activeNav: {
        type: Number,
        default: 1
    }
})

//emit(父组件中的自定义方法)
const emit = defineEmits(['getSearchData']);
//点击查找按钮
const searchList = () => {
  
}


//点击清空按钮
const empty = () => {
  
}






const useMainStore = useMain(store);//pinia
//storeToRefs 保持响应式 packUp_overhaul 通用设备搜索栏是否收起 packUp_gateway 网关设备搜索栏是否收起
let { packUp_overhaul } = storeToRefs(useMainStore);

//点击收起按钮
const changePackUp = () => {
    useMainStore.updatedpackUpOverhaul(!packUp_overhaul.value);
}

</script>

<style scoped lang="scss">
.searchBar {
    // padding-left: 5px;
    // margin-bottom: 23px;
    // min-height: 145px;
    background-color: #fff;
    border-radius: 0px 0px 8px 8px;
    padding: 28px 0px 0px 30px;
    .navBar {
        ul {
            // width: 320px;
            display: flex;
            // border: 1px solid rgb(229, 229, 229);

            li {
                width: 160px;
                height: 38px;
                font-size: 16px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 36px;
                // color: rgba(0, 0, 0, 1);
                color: rgb(112, 105, 95);
                text-align: center;
                cursor: pointer;
                position: relative;
                border-top: 1px solid rgb(229, 229, 229);
                border-bottom: 1px solid rgb(229, 229, 229);
                border-right: 1px solid rgb(229, 229, 229);

                &:first-child {
                    border-left: 1px solid rgb(229, 229, 229);
                }

                &.active {
                    width: 160px;
                    font-size: 16px;
                    line-height: 36px;
                    color: rgba(0, 0, 0, 1);
                    background: rgb(229, 229, 229);
                }
            }

        }
    }

    .content {
        .searchBar_content {
           padding-top: 26px;
            display: flex;
            padding-left: 8px;
            padding-right: 35px;
            height: 137px;
            transition: all 0.2s linear;
            overflow: hidden;

            &.alarmRule_form_packUp {
                height: 80px;

                .left {
                    .el-form {
                        .el-form-item {
                            max-width: 33%;
                            padding-right: 35px;
                        }
                    }
                }

            }


            .left {
                flex: 1;

                .el-form {
                    display: flex;
                    flex-wrap: wrap;
                    align-content: space-between;



                    .el-form-item {
                        align-items: center;
                        max-width: 25%;
                        padding-right: 25px;
                        margin-bottom: 25px;
                        height: 32px;

                        // &:nth-child(n+4) {
                        //     margin-bottom: 20px;
                        // }

                        &.text_letter {
                            word-spacing: 25px;
                        }

                        :deep(.el-form-item__label) {
                            width: 84px;
                            text-align: right;
                            justify-content: flex-end;
                        }

                        :deep(.select-trigger) {
                            .el-input {
                                width: 100%;
                            }
                        }

                        :deep(.el-cascader) {
                            width: 260px;

                            .el-input {
                                width: 100%;
                            }
                        }
                    }
                }

            }

            .right {
                width: 184px;
                height: 32px;
                display: flex;
                align-items: center;
                font-size: 14px;
                justify-content: flex-start;
                color: rgb(112, 105, 95);

                .btn_bg {
                    height: 35px;
                    width: 35px;
                    flex-shrink: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;

                    &:hover {
                        background: rgba(0, 0, 0, 0.1);
                        border-radius: 2px;
                    }

                    &.btn_bg2 {
                        margin: 0 21px 0 17px;
                    }

                    .search_icon {
                        width: 21px;
                    }

                    .reset_icon {
                        width: 20px;
                        cursor: pointer;
                    }
                }



                .packUp_icon {
                    width: 12px;
                    margin-left: 8px;
                }

                .more {
                    cursor: pointer;
                }
            }

            .right2 {
                width: 80px;
                display: inline-block;
                height: auto;

                .right_btn {
                    height: 32px;
                    display: flex;
                    align-items: center;
                    margin-bottom: 25px;
                    // padding-left: 6px;
                }

                .more {
                    line-height: 32px;
                }

                .packUp_icon {
                    transform: rotate(-180deg);
                }
            }
        }
    }

}
</style>